<template>
	<!-- 用户详情 -->
	<view class="fill-base pages-home" v-if="detail.id">

		<!-- <banner :list="[detail.master_map]" :margin="0" :autoplay="true" :height="562" :indicatorActiveColor="primaryColor">
		</banner> -->
		<image mode="aspectFit" height="562rpx" :src="detail.master_map?detail.master_map:detail.avatar"></image>
		<view class="fill-base pd-lg">
			
			<view class="fill-base flex-center f-desc c-caption pt-sm pb-md">
				
				<image mode="aspectFill" class="cover" :src="detail.avatar"></image>
				
				<view class="flex-1 ml-lg">
					<view class="flex-y-baseline flex-y-start">
						<view class="f-desc c-title ml-sm mr-sm">{{detail.user_nicename}}</view>
						<i v-if="detail.sex == 0" class="iconfont nan c-success" ></i>
						<i v-else class="iconfont nv c-warning" ></i>
						
					</view>
					<view class="flex-y-baseline flex-1 mt-md">
						<view class="f-desc c-title ml-sm mr-sm">{{age}}岁.</view>
						<view class="f-desc c-title ml-sm mr-sm">{{detail.rise}}cm.</view>
						<view class="f-desc c-title ml-sm mr-sm">{{detail.weight}}kg.</view>
						<view class="f-desc c-title ml-sm mr-sm">{{18}}km</view>
					</view>
				</view>
				<!-- <view class="flex-column flex-center" @click="collectany(detail.id)">
					<i v-if="detail.sex == 0 || detail.is_collect == 1" class="iconfont live c-yellow2" ></i>
					<i v-else class="iconfont live c-paragraph"></i>
					<view class="f-desc c-title ml-sm mr-sm" v-if="detail.is_collect == 1" style="color:lightgray;">喜欢</view>
					<view class="f-desc c-title ml-sm mr-sm" v-else>喜欢</view>
				</view> -->
			</view>
			
			<view class="fill-base flex-y-baseline flex-1 mt-md mb-md">
				<i class="iconfont shu" :style="{color:primaryColor}"></i>
				<view class="f-title c-title">签名</view>
			</view>
			<view class="f-paragraph c-paragraph pl-md">{{detail.signature}}</view>
			
		<!-- 	<view class="fill-base flex-y-baseline flex-1 mt-md mb-md">
				<i class="iconfont shu" :style="{color:primaryColor}"></i>
				<view class="f-title c-title">兴趣爱好</view>
			</view>
			<view class="fill-base flex-y-baseline flex-1 mt-md mb-md">
				<view class="item-box">
					<view v-for="(item, index) in detail.hobby">
						<view @tap.stop='handerHobbyChange(index, item.ifcheck)' class="flex-center flex-column box-btn"  :class="[{'box-btn2': item.ifcheck == 1}]">
							<view class="f-paragraph">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view> -->
			
			
			<view class="fill-base flex-y-baseline flex-1 mt-md mb-md">
				<i class="iconfont shu" :style="{color:primaryColor}"></i>
				<view class="f-title c-title pl-sm pr-sm">个人信息</view>
			</view>
			<view class="flex-y-baseline mb-md" style="width: 100%;">
				<view class="f-paragraph c-paragraph view-info-bg mr-md">性别：{{detail.sex == 1 ? "男" : "女"}}</view>
				<view class="f-paragraph c-paragraph view-info-bg mr-md">生日：{{ detail.birthday }}</view>
			</view>
			<view class="flex-y-baseline mb-md" style="width: 100%;">
				<view class="f-paragraph c-paragraph view-info-bg mr-md">所在地：{{detail.location}}</view>
			</view>
			<!-- <view class="flex-y-baseline mb-md" style="width: 100%;">
				<view class="f-paragraph c-paragraph view-info-bg mr-md">行业：{{detail.introduce}}</view>
				<view class="f-paragraph c-paragraph view-info-bg mr-md">年收入：{{detail.aincome}}</view>
				<view class="f-paragraph c-paragraph view-info-bg mr-md">身高：{{detail.rise}}</view>
			</view>
			<view class="flex-y-baseline mb-md" style="width: 100%;">
				<view class="f-paragraph c-paragraph view-info-bg mr-md">体重：{{detail.weight}}</view>
				<view class="f-paragraph c-paragraph view-info-bg mr-md">身材：{{detail.figure}}</view>
				<view class="f-paragraph c-paragraph view-info-bg mr-md">情感状态：{{detail.emostate}}</view>
			</view>
			<view class="flex-y-baseline mb-md" style="width: 100%;">
				<view class="f-paragraph c-paragraph view-info-bg mr-md">性格：{{detail.character}}</view>
				<view class="f-paragraph c-paragraph view-info-bg mr-md">接收约会：{{detail.rappoin}}</view>
			</view> -->
			
			<view class="fill-base flex-y-baseline flex-1 mt-md mb-md">
				<i class="iconfont shu" :style="{color:primaryColor}"></i>
				<view class="f-title c-title">自我介绍</view>
			</view>
			<view class="f-paragraph c-paragraph pl-md">{{detail.self_introduction}}</view>
			
			<view class="mt-md" style="width: 98%;" v-for="(item, index) in life_photo">
				<image mode="aspectFit" class="pl-md" style="width: 100%; " :src="item"></image>
			</view>
			
		</view>

		<view class="space-max-footer"></view>
		
		<fix-bottom-button v-if="userInfo.id == touid" @confirm=goEdit
			:text="[{type:'confirm',text:confirmText}]" bgColor="#fff">
		</fix-bottom-button>
		
		<!-- <view class="msg" style="margin-bottom: 0rpx;">
			<view class="f-title c-title pt-lg pb-lg" style="width: 100%;">温馨申明：</view>
			<view class="f-paragraph c-paragraph pb-lg" style="width: 100%;">
			1.平台搭建自由，自主，自愿的良好交友生态，进行资源对接，知识付费学习。任何个人私下与商业的合作与平台无关，平台也无权干涉。<br/>
			2.如果不同意电话联系开放对接，用户可以关闭此项功能，平台如有人联系您，24小时内您未回复，系统将默认您同意联系对接！<br/>
			3.此项电话联系功能多为自己储备资源，以备有事之需，多认名人朋友，自己多一次成功的机会。    送祝福。
			{{}}</view>
		</view> -->
		<view class="">
		<!-- 	<view class="shoujihao" style="display: flex;justify-content: space-between;">
				<view style="margin-left: 0px;">电话：{{detail.mobile}}</view>
				<view class="" v-if="detail.is_pay==1">
					<image src="../../static/telact.png" style="width: 38px;height: 38px;" @click="callphone()" mode=""></image>
				</view>
				<view v-else style="font-size: 12px;">
					幸福豆：{{hbeanprice}} / <text style="color:lightgray;">总({{detail.myhbean}})</text>
				</view>
			</view> -->
			
				
			
			<!-- <view class="">
				立即对接  <text > {{confirmText}}</text>
			</view> -->
			<fix-bottom-button v-if="userInfo.id != touid && detail.public_type > 0" @confirm=confirm
				:text="[{type:'confirm',text:confirmText}]" bgColor="#fff">
			</fix-bottom-button>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index"
	import $api from '@/api/index.js';
	export default {
		components: {
			parser
		},
		data() {
			return {
				touid: 0,
				frompage:'',
				options: {},
				coinChangeindex: 0,
				coins: [
					{
						title: "免费",
						number: "0",
					},
					{
						title: "会员",
						number: "199",
					},
					{
						title: "VIP",
						number: "2999",
					},
					{
						title: "贵宾",
						number: "9999",
					},
				],
				detail: {},
				life_photo: [], // 生活照
				confirmText: '',
				age: 0,
				hbeanprice:0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onShow() {
			this.initIndex()
		},
		onLoad(options) {
			this.touid = options.id
			this.frompage = options.from
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				await this.touserInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			
			async collectany(uid){
				let param = {
					cid: uid,
					type:1
				}
				let data = await $api.user.collectanything(param)
				console.log(data.code)
				let url = `/user/pages/user-detail?id=${this.touid}`
				this.$util.goUrl({
					url
				})
				
			},
			initRefresh() {
				this.initIndex(true)
			},
			//获取个人主页
			async touserInfo() {
				let param = {
					touid: this.touid,
				}
				let data = await $api.user.touserInfo(param)
				this.detail = data
				
				// debugger
				console.log('=====获取个人主页', data)
				this.life_photo = []
				for (var i = 0; i < data.life_photo.length; i++) {
					// debugger
					var item = data.life_photo[i]
					this.life_photo.push(item.imageurl)
				}
				
				if(this.touid == this.userInfo.id){
					this.confirmText = '编辑'
				} else {
					if(this.detail.is_pay==1){
						this.confirmText = '开始聊天';
					}else{
					if(data.public_type == 1){
						this.confirmText = '立即对接' + '(￥4.95) '
						this.hbeanprice = '4.95'
					} else if(data.public_type == 2){
						this.confirmText = '立即对接' + '(￥14.95) '
						this.hbeanprice = '14.95'
					} else if(data.public_type == 3){
						this.confirmText = '立即对接' + '(￥49.5)  '
						this.hbeanprice = '49.5'
					}
					}
				}
				
				this.birthToAge(this.detail.birthday)
				
				this.$util.hideAll()
			},
			linkpress(res) {
				console.log("linkpress", res);
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			},
			callphone()
			{
				if(this.detail.is_pay==0)
				{
					uni.showToast({
						icon:"error",
						title:"请先对接解锁"
					})
					return
				}else{
					uni.makePhoneCall({  
					    phoneNumber: this.detail.mobile // 这里填入你想要拨打的电话号码  
					});
				}
			},
			sign(){
				
			},
			clickImg(){
				var url = this.detail.master_map
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			handerCoinChange(index) {
				debugger
				this.coinChangeindex = index
			},
			 async confirm(){
				 if(this.detail.is_pay==1){
					 let url = `/pages/chartDeatil?id=${this.touid}&from=det`
				 	this.$util.goUrl({
				 		url
				 	})
					return
				 }
				let param = {
					touserid: this.detail.id,
				}
				// debugger
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let {
						pay_list
					} = await this.$api.order.loverPayOrder(param)
					this.$util.hideAll()
					if (pay_list) {
						try {
							await this.$util.pay(pay_list)
							this.$util.showToast({
								title: `支付成功`
							})
							
							this.lockTap = false
							return
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							
							this.lockTap = false
							return
						}
					}
					this.$util.showToast({
						title: `支付成功`
					})
					
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			goEdit(){
				let url = `/user/pages/user-edit?id=${this.touid}`
				this.$util.goUrl({
					url
				})
			},
			//根据出生日期计算年龄
		  birthToAge(birthday){
			console.log("birthday：：",birthday)
			if(birthday){
			  birthday=birthday.split('-');
			  // 新建日期对象
			  let date = new Date();
			  // 今天日期，数组，同 birthday
			  let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
			  // 分别计算年月日差值
			  let age = today.map((val, index) => {
				return val - birthday[index]
			  })
			  // 当天数为负数时，月减 1，天数加上月总天数
			  if (age[2] < 0) {
				// 简单获取上个月总天数的方法，不会错
				let lastMonth = new Date(today[0], today[1], 0)
				age[1]--
				age[2] += lastMonth.getDate()
			  }
			  // 当月数为负数时，年减 1，月数加上 12
			  if (age[1] < 0) {
				age[0]--
				age[1] += 12
			  }
			  console.log(age[0]+'岁'+age[1]+'月'+age[2]+'天');
			  this.age = age[0];
			  // this.ageMonth = age[1];
			  // this.ageDay = age[2];
			}
		  }
		}
	}
</script>

<style lang="scss">
	.pages-home {
		background-color: #fff;
		.view-bg {
			position: relative;
			max-width: 25%;
			padding: 10rpx 15rpx;
			text-align: center;
			border-radius: 50px;
			border: 1rpx solid #333;
		}
		
		.view-info-bg {
			position: relative;
			max-width: 80%;
			padding: 10rpx 15rpx;
			text-align: center;
			border-radius: 50px;
			border: 1rpx solid #333;
		}
		
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		
		.cover {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50rpx;
		}
		
		.item-box {
			box-sizing: border-box;
			padding: 10px 6px;
			width: 100%;
			height: 184rpx;
			float: left;
			display: flex;
			flex-wrap: wrap; //自动换行
			background-color: #fff;
			.box-btn {
				margin-right: 5rpx;
				margin-bottom: 10rpx;
				width: 100rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin-right: 5rpx;
				margin-bottom: 10rpx;
				width: 100rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
		}
		
		.image-list {
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
		}
	
		.user-item {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			background-color: #fff;
			float: left;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			padding-bottom: 120rpx;
		}
		
		.shoujihao{
			position: fixed;
			bottom: 55px; 
			width: 100%; 
			height:80px;
			padding:20px;
			font-size:14px;
			background-color: #fff;
		}
	
	}
</style>
